.covid-header-container {
    .covid-numberbox {
        margin-right: 20px;
        width       : 150px;

        .covid-numberbox-title {
            color      : #fff;
            font-size  : 16px;
            font-weight: 700;
            line-height: 16px;
            margin     : 10px 10px 0 0;
            padding    : 5px 0 5px 10px;
            position   : relative;
            text-align : left;
            text-shadow: 1px 1px 1px #000, 1px 1px 1px #fff;

            &:after {
                bottom  : 10px;
                content : '';
                position: absolute;
                right   : -10px;
                top     : 0;
                width   : 10px;
            }

            &:before {
                border-style: solid;
                border-width: 5px;
                bottom      : 0;
                content     : '';
                height      : 0;
                position    : absolute;
                right       : -10px;
                width       : 0;
            }

            &.active {
                background-color: v(covid-header-active-background-color);
                border-left     : 5px solid rgb(100, 181, 246);

                &:after {
                    background-color: v(covid-header-active-background-color);
                }

                &:before {
                    border-bottom: 5px solid v(covid-header-active-background-color);
                    border-right : 5px solid v(covid-header-active-background-color);
                    border-color : v(covid-header-active-background-color) transparent transparent v(covid-header-active-background-color);
                }
            }

            &.cases {
                background-color: v(covid-header-cases-background-color);
                border-left     : 5px solid rgb(187, 187, 187);

                &:after {
                    background-color: v(covid-header-cases-background-color);
                }

                &:before {
                    border-bottom: 5px solid v(covid-header-cases-background-color);
                    border-right : 5px solid v(covid-header-cases-background-color);
                    border-color : v(covid-header-cases-background-color) transparent transparent v(covid-header-cases-background-color);
                }
            }

            &.deaths {
                background-color: v(covid-header-deaths-background-color);
                border-left     : 5px solid rgb(251, 103, 103);

                &:after {
                    background-color: v(covid-header-deaths-background-color);
                }

                &:before {
                    border-bottom: 5px solid v(covid-header-deaths-background-color);
                    border-right : 5px solid v(covid-header-deaths-background-color);
                    border-color : v(covid-header-deaths-background-color) transparent transparent v(covid-header-deaths-background-color);
                }
            }

            &.recovered {
                background-color: v(covid-header-recovered-background-color);
                border-left     : 5px solid rgb(40, 218, 111);

                &:after {
                    background-color: v(covid-header-recovered-background-color);
                }

                &:before {
                    border-bottom: 5px solid v(covid-header-recovered-background-color);
                    border-right : 5px solid v(covid-header-recovered-background-color);
                    border-color : v(covid-header-recovered-background-color) transparent transparent v(covid-header-recovered-background-color);
                }
            }
        }

        .covid-numberbox-number {
            font-size: 20px;
            margin   : 5px 0;

            &.active {
                color: v(covid-header-active-color);
            }

            &.cases {
                color: v(covid-header-cases-color);
            }

            &.deaths {
                color: v(covid-header-deaths-color);
            }

            &.recovered {
                color: v(covid-header-recovered-color);
            }
        }
    }
}